<template>
  <editor v-model="tinymceHtml" :init="init"></editor>
</template>

<script>
import tinymce from "tinymce/tinymce";
import "tinymce/themes/modern/theme";
import Editor from "@tinymce/tinymce-vue";

import "tinymce/plugins/image";
import "tinymce/plugins/link";
import "tinymce/plugins/code";
import "tinymce/plugins/table";
import "tinymce/plugins/lists";
import "tinymce/plugins/contextmenu";
import "tinymce/plugins/wordcount";
import "tinymce/plugins/colorpicker";
import "tinymce/plugins/textcolor";

export default {
  name: "tinymce",
  data() {
    return {
      tinymceHtml: "",
      init: {
        language_url: "./static/zh_CN.js",
        language: "zh_CN",
        skin_url: "./static/skins/lightgray",
        height: 600,
        plugins:
          "link lists image code table colorpicker textcolor wordcount contextmenu",
        toolbar:
          "bold italic underline strikethrough | fontsizeselect | formatselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | removeformat | outdent indent blockquote | undo redo | link unlink image code table",
        branding: false,
        menubar: false,
        images_upload_handler: function (blobInfo, success, failure) {
          var xhr, formData;
          xhr = new XMLHttpRequest();
          xhr.withCredentials = false;
          xhr.open(
            "POST",
            "http://110.42.175.49:21127/chongqing/stage/file/uploadFile"
            // "http://192.168.124.20:19309/stage/file/uploadQiNiuFile"
          );
          xhr.setRequestHeader("token", localStorage.getItem("token"));
          xhr.onload = function () {
            console.log(json.data);
            var json = JSON.parse(xhr.responseText);
            if (json.code != 1000) {
              failure("HTTP Error: " + json);
              return;
            }
            success("http://test.static.bowu66.com/" + json.data);
            // success("http://test.static.bowu66.com/" + json.data);
          };
          formData = new FormData();
           console.log(blobInfo.blob(), blobInfo.filename())
          formData.append("file", blobInfo.blob(), blobInfo.filename());
          xhr.send(formData);
        },
      },
    };
  },
  props: {
    value: {
      type: String,
      default: "",
    },
  },
  watch: {
    value: {
      immediate: true,
      handler: function (value) {
        if (value !== this.tinymceHtml) {
          this.tinymceHtml = this.value
        }
      }
    },
    // value: function (value) {
    //   console.log(111);

    // },
    tinymceHtml: function (value) {
      this.$emit("catchData", value);
    },
  },
  created() {
    tinymce.init({});
  },
  components: {
    Editor,
  },
  // beforeDestroy(){
  //   this.show = false
  //   tinymce.editors = [];
  // },
};
</script>
